<template>
  <div class="">
    <a-modal
      v-model:visible="dialogVisible"
      :title="dialogTitle"
      :align-center="false"
      top="15vh"
      :mask-closable="false"
      @cancel="dialogCancel"
      @before-ok="dialogBeforeOk"
    >
      <a-form ref="formRef" :model="formModel">
        <a-form-item field="parent_code" label="上一级">
          <a-cascader
            v-model="formModel.parent_code"
            :options="treeDatas"
            :field-names="{ value: 'area_code', label: 'name' }"
            placeholder="一级地区"
            check-strictly
            allow-search
            allow-clear
          />
        </a-form-item>
        <a-form-item
          field="name"
          label="名称"
          required
          :validate-trigger="['change','input']"
          :rules="[
            {
              required: true,
              message: '名称不能为空',
            },
          ]"
        >
          <a-input v-model="formModel.name" placeholder="请输入名称：北京市"/>
        </a-form-item>
        <a-form-item field="short_name" label="简称">
          <a-input v-model="formModel.short_name" placeholder=""/>
        </a-form-item>
        <a-form-item field="pinyin" label="拼音">
          <a-input v-model="formModel.pinyin" placeholder=""/>
        </a-form-item>
        <a-form-item
          field="area_code"
          label="行政代码"
          required
          :validate-trigger="['change','input']"
          :rules="[
            {
              required: true,
              message: '行政代码不能为空',
            },
          ]"
        >
          <a-input v-model="formModel.area_code" placeholder="请输入编码：110000"/>
        </a-form-item>
        <a-form-item field="zip_code" label="邮政编码">
          <a-input v-model="formModel.zip_code" placeholder=""/>
        </a-form-item>
        <a-form-item field="city_code" label="区号">
          <a-input v-model="formModel.city_code" placeholder=""/>
        </a-form-item>
        <a-form-item field="lng" label="经度">
          <a-input v-model="formModel.lng" placeholder=""/>
        </a-form-item>
        <a-form-item field="lat" label="纬度">
          <a-input v-model="formModel.lat" placeholder=""/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';

  import { disabledTree } from '@/utils';
  import { apiInfo, apiSave, apiTree } from '@/api/region';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    id: {
      type: [Number, String],
      default: '',
    },
    // treeDatas: {
    //   type: Array,
    //   default() {
    //     return [];
    //   },
    // },
  });
  const emit = defineEmits(['saveCallback']);

  const baseFormModel = {
    id: '',
    created_at: '',
    updated_at: '',
    parent_code: '',
    name: '',
    short_name: '',
    pinyin: '',
    area_code: '',
    zip_code: '',
    city_code: '',
    level: 1,
    status: 1,
  };
  const formRef = ref<FormInstance>();
  const formModel = ref<any>(baseFormModel);

  const dialogVisible = ref(false);
  const dialogTitle = ref();

  const treeDatas = ref<any>([]);

  // 树形列表
  const treeList = async (row?: any) => {
    const {data} = await apiTree();
    treeDatas.value = data.data;
    if (row) {
      treeDatas.value = disabledTree(treeDatas.value, row.id);
    }
  };
  // 表单重置
  const reset = async () => {
    formModel.value = baseFormModel;
    await formRef.value?.resetFields();
  };
  const fetchData = async (row?: any) => {
    treeList(row);

    dialogVisible.value = true;
    dialogTitle.value = '新增';
    if (row) {
      dialogTitle.value = `编辑: ${row.name}`;
    }
    reset();
    if (row) {
      const { data } = await apiInfo({ id: row.id });
      formModel.value = data;
    }
  };
  // 提交
  const submit = async (done: any) => {
    try {
      const ruleRes = await formRef.value?.validate();
      if (!ruleRes) {
        await apiSave(formModel.value);
        done();
        emit('saveCallback');
      } else {
        done(false);
      }
    } catch (err) {
      done(false);
    } finally {
      done(false);
    }
  };

  const dialogCancel = () => {
    dialogVisible.value = false;
  };
  const dialogBeforeOk = (done: any) => {
    submit(done);
  };

  // 暴露方法【给父级调用】
  defineExpose({
    fetchData,
  });
</script>

<style scoped lang="less">

</style>
